<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>性别：{{ sex }}（vue2配置的）</h2>
  <h2>a的值是：{{ a }}</h2>
  <button @click="sayHello">说话</button>
  <br>
  <br>
  <button @click="sayWelcome">欢迎（vue2配置的）</button>
  <br>
  <br>
  <button @click="test1">通过vue2读取vue3中setup配置中的数据，方法</button>
  <br>
  <br>
  <button @click="test2">通过vue3读取vue2配置中的数据，方法</button>
  <br>
  <br>
  <button @click="test3">测试优先级</button>
</template>

<script>
export default {
  name: "App",
  data(){
    return{
      sex:"男",
      a:'data'
    }
  },
  methods: {
    sayWelcome(){
      alert('欢迎学习Vue3.x')
    },
    test1(){
      // 通过vue2读取vue3中setup配置中的数据，方法（可以读取到）
      console.log(this.name);
      console.log(this.age);
      console.log(this.sex);
      console.log(this.sayHello);
    },
    test3(){
      console.log('我是methods');
    }
  },


  // setup必须设置返回值，否则无法在模版中使用
  setup() {
    // 定义数据
    let name = "张三";
    let age = 18;
    let a = 'setup'

    // 定义方法
    function sayHello() {
      alert(`我叫${name}，我${age}岁了!`);
    }

    // 通过vue3读取vue2配置中的数据，方法（无法读取到vue2中的数据、方法）
    function test2(){
      console.log(name);
      console.log(age);
      console.log(sayHello);
      console.log(this.sex);  //undefined
      console.log(this.sayWelcome); //undefined
    }
    
    // 如果setup和data、methods中存在同名数据、方法时，谁后定义谁生效
    function test3(){
      console.log('我是setup');
    }

    // 若setup返回一个对象，则对象中的属性和方法均可以在模版中直接使用
    return{
      name,
      age,
      sayHello,
      test2,
      test3,
      a
    }

    // 若返回一个渲染函数：则可以自定义渲染内容（了解）
    // return () => h("h1", `法外狂徒：${name}，他今年：${age}`);
  },
  
  
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
